import React, { Component } from 'react'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
import './App.css'
export default class App extends Component {
  state = {
    todoList: [
      {
        id: 1,
        todoName: '吃饭',
        isDone: false,
      },
      {
        id: 2,
        todoName: '睡觉',
        isDone: true,
      },
    ],
  }

  //这个函数用于接收Header组件传递过来的任务名
  getTodoName = (todoName) => {
    // 根据任务名创建任务对象
    const todo = {
      todoName,
      id: Date.now(),
      isDone: false,
    }

    // 根据旧的todoList,创建一个新的newTodoList
    const newTodoList = [...this.state.todoList]
    // 往新数组中添加数据
    newTodoList.push(todo)

    this.setState({
      todoList: newTodoList,
    })
  }
  render() {
    const { todoList } = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header getTodoName={this.getTodoName}></Header>
          <List todos={todoList}></List>
          <Footer></Footer>
        </div>
      </div>
    )
  }
}
